export const appTheme = {
  default: {
    colors: {
      appBg: {
        // class="bg-app-bg-1"
        1: "#eaf7f7",
        2: "#CCFFFF",
        3: "#99CCFF",
        4: "#3399CC",
      },
      appText: {
        // class="text-app-text-1"
        1: "#CCFFFF",
        2: "#003366",
        3: "#99CCFF",
      },
      appBorder: {
        // class="text-app-border-1"
        1: "#003366",
      },
    },
  },
  red: {
    colors: {
      appBg: {
        1: "#FFCCCC",
        2: "#FF9999",
        3: "#FF6666",
        4: "#FF0033",
      },
      appText: {
        1: "#FFCCCC",
        3: "#FF6666",
        2: "#FF0033",
      },
      appBorder: {
        1: "#FF0033",
      },
    },
  },
  yellow: {
    colors: {
      appBg: {
        1: "#FFFFCC",
        2: "#FFFF99",
        3: "#FFFF33",
        4: "#FFCC33",
      },
      appText: {
        1: "#FFFFCC",
        3: "#FFFF00",
        2: "#FF9900",
      },
      appBorder: {
        1: "#FF9900",
      },
    },
  },
};

export const safelist = () => {
  const arr: string[] = [];
  Object.keys(appTheme.default.colors).forEach((item) =>
    arr.push(...Array.from({ length: 10 }, (_, i) => `bg-${item}-${i}`))
  );
  /*
  console.log(arr);
  [
    'bg-appBg-0',     'bg-appBg-1',
    'bg-appBg-2',     'bg-appBg-3',
    'bg-appBg-4',     'bg-appBg-5',
    'bg-appBg-6',     'bg-appBg-7',
    'bg-appBg-8',     'bg-appBg-9',
    'bg-appText-0',   'bg-appText-1',
    'bg-appText-2',   'bg-appText-3',
    'bg-appText-4',   'bg-appText-5',
    'bg-appText-6',   'bg-appText-7',
    'bg-appText-8',   'bg-appText-9',
    'bg-appBorder-0', 'bg-appBorder-1',
    'bg-appBorder-2', 'bg-appBorder-3',
    'bg-appBorder-4', 'bg-appBorder-5',
    'bg-appBorder-6', 'bg-appBorder-7',
    'bg-appBorder-8', 'bg-appBorder-9'
  ]
  */

  return arr;
};
